Data Binding হল XAML এবং C#-এর মধ্যে একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা UI এবং ডেটা মডেল বা প্রপার্টির মধ্যে সম্পর্ক তৈরি করে। Windows Presentation Foundation (WPF), UWP (Universal Windows Platform), এবং WinUI অ্যাপ্লিকেশনগুলিতে Data Binding ব্যবহারের মাধ্যমে UI-এর উপাদান এবং ডেটার মধ্যে তথ্যের অবাধ প্রবাহ তৈরি করা সম্ভব।
এখানে One-Way এবং Two-Way Data Binding এর টেকনিকস আলোচনা করা হবে।
১. One-Way Data Binding
One-Way Data Binding হল এমন একটি বাইন্ডিং যেখানে ডেটা শুধুমাত্র এক দিক থেকে UI বা ভিউ-এর দিকে প্রবাহিত হয়। অর্থাৎ, ডেটা মডেল থেকে UI তে তথ্য পাঠানো হয়, কিন্তু UI থেকে মডেলে কোনো তথ্য ফেরত যায় না।
বৈশিষ্ট্য:
- Source থেকে Target এ ডেটা প্রবাহিত হয়।
- UI শুধুমাত্র ডেটা প্রদর্শন করে, এবং ব্যবহারকারী UI-তে কিছু পরিবর্তন করলে তা ডেটা মডেলে প্রতিফলিত হয় না।
- এটি সাধারণত UI-তে স্থির তথ্য প্রদর্শন করার জন্য ব্যবহৃত হয়।
উদাহরণ:
XAML:
<TextBlock Text="{Binding UserName}" />
C# Code-Behind:
public class ViewModel
{
public string UserName { get; set; }
public ViewModel()
{
UserName = "John Doe"; // Set some initial value
}
}
DataContext Set:
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel(); // Set the data context to ViewModel
}
ব্যাখ্যা:
- Binding ব্যবহার করে UserName প্রপার্টি TextBlock-এর
Textপ্রপার্টির সাথে যুক্ত করা হয়েছে। এতে UserName এর মান শুধুমাত্র TextBlock-এ প্রদর্শিত হবে এবং UserName প্রপার্টি পরিবর্তিত হলে তা UI-তে প্রতিফলিত হবে। - UI থেকে কোনো পরিবর্তন হলে তা UserName এ প্রভাব ফেলবে না।
২. Two-Way Data Binding
Two-Way Data Binding হল এমন একটি বাইন্ডিং যেখানে ডেটা একে অপরকে দুটি দিকে প্রবাহিত করে। অর্থাৎ, ব্যবহারকারীর পরিবর্তন UI-তে থাকা ডেটার উপর প্রভাব ফেলে এবং সেই পরিবর্তন ডেটা মডেলেও প্রতিফলিত হয়, এবং তার পাশাপাশি ডেটা মডেল থেকে UI তে আপডেট আসবে।
বৈশিষ্ট্য:
- Source থেকে Target এবং Target থেকে Source - উভয় দিকেই ডেটার প্রবাহ ঘটে।
- এটি সাধারণত ব্যবহারকারীর ইনপুটের জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারীর পরিবর্তন মডেলেও রিফ্লেক্ট করতে হবে।
উদাহরণ:
XAML:
<TextBox Text="{Binding UserName, Mode=TwoWay}" Width="200" Height="30"/>
C# Code-Behind:
public class ViewModel : INotifyPropertyChanged
{
private string userName;
public string UserName
{
get { return userName; }
set
{
if (userName != value)
{
userName = value;
OnPropertyChanged("UserName");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
DataContext Set:
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel(); // Set the data context to ViewModel
}
ব্যাখ্যা:
- TwoWay Binding সেট করা হয়েছে TextBox-এর Text প্রপার্টির সাথে UserName প্রপার্টি সংযুক্ত করতে।
- INotifyPropertyChanged ইন্টারফেস ব্যবহার করা হয়েছে যাতে UserName প্রপার্টি পরিবর্তিত হলে UI আপডেট হয় এবং UI-তে যদি কোনো পরিবর্তন হয়, তা আবার UserName প্রপার্টিতে প্রবাহিত হবে।
- TextBox-এ ইনপুট পরিবর্তিত হলে তা সরাসরি UserName প্রপার্টি আপডেট করবে, এবং UserName-এর মান পরিবর্তিত হলে তা UI-তে রিফ্লেক্ট হবে।
One-Way এবং Two-Way Data Binding এর তুলনা
| বৈশিষ্ট্য | One-Way Data Binding | Two-Way Data Binding |
|---|---|---|
| ডেটার প্রবাহ | এক দিক থেকে (Source থেকে Target) | দুই দিক থেকে (Source থেকে Target এবং Target থেকে Source) |
| ব্যবহার | UI তে স্থির ডেটা প্রদর্শন করা | ব্যবহারকারীর ইনপুট গ্রহণ ও ডেটা মডেলে আপডেট হওয়া |
| ইনপুট পরিবর্তন | UI তে কোনো পরিবর্তন ডেটা মডেলে প্রভাব ফেলে না | UI তে পরিবর্তন হলে তা ডেটা মডেলেও প্রভাব ফেলে |
| প্রযুক্তিগত উদাহরণ | স্ট্যাটিক টেক্সট বা তথ্য ডিসপ্লে করা | ফর্ম ফিল্ড, ব্যবহারকারী ইনপুট এবং মডেল আপডেট |
উপসংহার
One-Way Data Binding এবং Two-Way Data Binding XAML-এর দুটি শক্তিশালী বৈশিষ্ট্য, যা UI এবং ডেটা মডেল বা প্রপার্টির মধ্যে সম্পর্ক তৈরি করতে সহায়তা করে। One-Way Data Binding সাধারণত UI প্রদর্শনের জন্য ব্যবহৃত হয়, যেখানে ডেটা মডেল থেকে UI তে ডেটা পাঠানো হয়। অপরদিকে, Two-Way Data Binding ব্যবহারকারীর ইনপুটের ক্ষেত্রে অত্যন্ত গুরুত্বপূর্ণ, যেখানে UI থেকে ডেটা মডেলে পরিবর্তন এবং তার পরবর্তী প্রভাব UI-তে প্রতিফলিত হয়।
এই দুটি Data Binding টেকনিকস একত্রে ব্যবহৃত হলে, ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং ডেটা এবং UI-এর মধ্যে অবাধ প্রবাহ সৃষ্টি হয়।
Read more
